<template>
  <div class="ward-detail-handle">
    <div v-if="wardData" class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="病房编号">
          {{ wardData.wardNo }}
        </el-descriptions-item>
        <el-descriptions-item label="病房名称">
          {{ wardData.name }}
        </el-descriptions-item>
        <el-descriptions-item label="所属科室">
          {{ wardData.departmentName }}
        </el-descriptions-item>
        <el-descriptions-item label="病房类型">
          <el-tag :type="getTypeTagType(wardData.type)">
            {{ getTypeText(wardData.type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="楼层">
          {{ wardData.floor }}F
        </el-descriptions-item>
        <el-descriptions-item label="位置">
          {{ wardData.location }}
        </el-descriptions-item>
        <el-descriptions-item label="总床位数">
          {{ wardData.totalBeds }}
        </el-descriptions-item>
        <el-descriptions-item label="已占用床位">
          {{ wardData.occupiedBeds }}
        </el-descriptions-item>
        <el-descriptions-item label="床位使用率">
          {{ getBedOccupancyRate() }}%
        </el-descriptions-item>
        <el-descriptions-item label="负责护士">
          {{ wardData.nurseName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(wardData.status)">
            {{ getStatusText(wardData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDateTime(wardData.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="设备信息" :span="2">
          {{ wardData.equipment || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ wardData.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <div class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  wardData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['close'])

// 获取床位使用率
const getBedOccupancyRate = () => {
  if (!props.wardData.totalBeds || props.wardData.totalBeds === 0) return 0
  return Math.round((props.wardData.occupiedBeds / props.wardData.totalBeds) * 100)
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '停用',
    1: '启用',
    2: '维修中'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    0: 'danger',
    1: 'success',
    2: 'warning'
  }
  return typeMap[status] || 'info'
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    1: '普通病房',
    2: '重症监护',
    3: '手术室',
    4: '产房'
  }
  return typeMap[type] || '未知'
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    1: 'primary',
    2: 'danger',
    3: 'warning',
    4: 'success'
  }
  return typeMap[type] || 'info'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 处理关闭
const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.ward-detail-handle {
  padding: 20px 0;
}

.detail-content {
  padding: 20px 0;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}
</style> 